<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="17">
        <div class="body-box" v-loading="team_load">
          <window-title title="总体概况"></window-title>
          <div class="index-total-memo">
            <div>
              <div class="index-total-label">会员数</div>
              <div class="index-total-value">{{pal_data.user_num}}</div>
            </div>
            <div>
              <div class="index-total-label">活动数</div>
              <div class="index-total-value">{{pal_data.active_num}}</div>
            </div>
            <div>
              <div class="index-total-label">二级跑团</div>
              <div class="index-total-value">{{pal_data.child_team_num}}</div>
            </div>
            <div>
              <div class="index-total-label">账户余额</div>
              <div class="index-total-value">{{pal_data.cash_price}}</div>
            </div>
            <div>
              <div class="index-total-label">短信余数</div>
              <div class="index-total-value">{{pal_data.sms_num}}</div>
            </div>
          </div>
        </div>
        <div class="body-box">
          <window-title title="待办事项"></window-title>
          <div class="index-total-set">
            <div @click="toPage(1)">
              <div class="index-total-icon">
                <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/svip.png" alt />
              </div>
              <div class="index-set-label">会员审核</div>
              <div class="index-set-value">10</div>
            </div>
            <div @click="toPage(2)">
              <div class="index-total-icon">
                <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/active.png" alt />
              </div>
              <div class="index-set-label">活动审核</div>
              <div class="index-set-value">10</div>
            </div>
            <div @click="toPage(3)">
              <div class="index-total-icon">
                <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/task.png" alt />
              </div>
              <div class="index-set-label">任务审核</div>
              <div class="index-set-value">5</div>
            </div>
            <div @click="toPage(4)">
              <div class="index-total-icon">
                <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/child-team.png" alt />
              </div>
              <div class="index-set-label">二级跑团申请</div>
              <div class="index-set-value">2</div>
            </div>
          </div>
        </div>
        <div class="body-box index-data-echarts" v-loading="line_load">
          <window-title title="数据总览"></window-title>
          <div class="index-data-tab">
            <el-button-group>
              <el-button
                size="mini"
                round
                v-for="(item,key) in data_index_list"
                :key="key"
                :class="key == data_index ? 'com-btn' : ''"
                @click="changeData(key)"
              >{{item}}</el-button>
            </el-button-group>
          </div>
          <div class="index-data-tab-select">
            <el-button-group>
              <el-button
                size="mini"
                round
                v-for="(item,key) in data_select "
                :key="key"
                :class="key == data_select_index ? 'com-btn' : ''"
                @click="changeDataSelect(key)"
              >{{item}}</el-button>
            </el-button-group>
          </div>
          <div id="main"></div>
        </div>
      </el-col>
      <el-col :span="7">
        <!-- 跑团信息 -->
        <div class="body-box" v-loading="team_load">
          <div class="index-team-info">
            <img :src="pal_data.club_info.Logo" alt />
            <div class="index-team-base">
              <div class="index-team-base-name">
                <span>{{pal_data.club_info.Title}}</span>
                <img
                  src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/3400956073428cbc255914a9cb79d17.png"
                  class="index-team-cation"
                  v-if="pal_data.cation > 0"
                />
              </div>
              <div class="index-team-teammer">团长：{{pal_data.club_info.Contacter}}</div>
              
            </div>
          </div>
          <div class="index-team-form">
            <div>
              <span class="index-team-form-label">ID：</span>
              <span class="index-team-form-value">{{pal_data.club_info.IdCode}}</span>
            </div>

            <div>
              <span class="index-team-form-label">城市：</span>
              <span class="index-team-form-value">{{pal_data.club_info.City}}</span>
            </div>
            <div>
              <span class="index-team-form-label">口号：</span>
              <span class="index-team-form-value">{{pal_data.club_info.Slogan}}</span>
            </div>
          </div>
          <div class="team-to-action-btn" v-if="pal_data.cation == 0" @click="toCation()">去认证</div>
          <!-- /manage/setting/teamcation -->
        </div>
        <!-- 需求提交 -->
        <!-- <div class="body-box">
          <div class="team-apply-head">免费对接活动服务</div>
          <div class="team-apply-content">您需找活动场地、策划公司、展台搭建、网络租赁等服务，活动顾问1对1为您免费服务</div>
          <div class="team-to-action-btn" @click="addNeeds()">立即提交需求</div>
        </div> -->
        <!-- 扫一扫 -->
        <div class="body-box">
          <div class="team-apply-head">扫一扫，下载一块跑</div>
          <div class="team-qrcode-box">
            <div>
              <img
                class="team-qrcode-img"
                src="https://ss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=829888290,2650878176&fm=74&app=80&f=JPG&size=f121,121?sec=1880279984&t=274501980523d63a7d93c94f85aabbab"
                alt
              />
              <div class="team-qrcode-name">一块跑APP</div>
            </div>
            <div>
              <img
                class="team-qrcode-img"
                src="https://ss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=829888290,2650878176&fm=74&app=80&f=JPG&size=f121,121?sec=1880279984&t=274501980523d63a7d93c94f85aabbab"
                alt
              />
              <div class="team-qrcode-name">微信小程序</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 提交需求模态框 -->
    <!-- <el-dialog title="需求提交" :visible.sync="dialog">
      <add-needs></add-needs>
    </el-dialog>-->
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title.vue";
import echarts from "echarts";
import addNeeds from "./needs.vue";

export default {
  components: { windowTitle, addNeeds },
  data() {
    return {
      data_index: 0,
      data_index_list: ["会员数据", "活动数据", "交易数据"],
      data_select: ["周", "月"],
      data_select_index: 0,
      dialog: true,
      pal_data: {
        club_info: {}
      },
      team_load: true,
      time_type: 1,
      dx: [],
      dy: [],
      line_load: true,
      data_type: 1
    };
  },
  mounted() {
    this.getData();
    this.getLineData();
  },
  methods: {
    //页面跳转
    toPage(param){
      var url = '';
      switch(param){
        case 1:
        url = "/manage/user/apply";
        break;
        case 2:
        break;
        case 3:
        break;
        case 4:
        url = '/manage/team/list';
        break;
      }
      if(!url)return false;
      this.$router.push({
        path : url
      });
    },
    //获取折线图数据
    getLineData() {
      this.ajaxs("index/getdrawLine", {
        data: { time_type: this.time_type, data_type: this.data_type },
        success: res => {
          this.dx = res.msg.dx;
          this.dy = res.msg.dy;
          this.drawLine();
          this.line_load = false;
        }
      });
    },
    //去认证
    toCation() {
      this.$router.push({
        path: "/manage/setting/teamcation"
      });
    },
    //获取面板数据
    getData() {
      this.ajaxs("index/home", {
        success: res => {
          this.pal_data = res.msg;
          this.team_load = false;
        }
      });
    },
    //提交需求
    addNeeds() {
      // let routeData = this.$router.resolve({
      //   path: "/manage/index/needs"
      // });
      // window.open(routeData.href, "_blank");
      this.$router.push({
        path: "/manage/index/needs"
      });
    },
    //改变数据查看
    changeData(key) {
      this.data_index = key;
      this.data_type = key + 1;
      this.time_type = 1;
      this.line_load = true;
      this.data_select_index = 0;
      this.getLineData();
    },
    //改变折线图周、月
    changeDataSelect(key) {
      this.data_select_index = key;
      this.time_type = key + 1;
      this.line_load = true;
      this.getLineData();
    },
    //折线图
    drawLine() {
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        color: ["#8a70c6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#8a70c6"
            }
          }
        },
        grid: {
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.dx
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: this.data_index_list[this.data_index],
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: this.dy,
            lineStyle: {
              color: "#8a70c6",
              opacity: 0.3
            },
            areaStyle: {
              color: "#8a70c6",
              opacity: 0.3
            }
          }
        ]
      });
    }
  }
};
</script>

<style>
@import url(../../assets/css/index/index.css);
</style>